<template>
    <el-container style="height: 100%;">
        <el-header class="custom-header-form">
            <el-form :inline="true" :model="searchForm" class="search-form-inline" size="mini" @submit.native.prevent>
                <el-form-item label="创建时间:">
                    <CuDatepicker @update-date="updatedate" :def="false"/>
                </el-form-item>
                <el-form-item label-width="0">
                    <el-input v-model.trim="searchForm.resourceName" placeholder="请输入资源名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" native-type="submit" @click="()=>{
                        pageNo = 1;
                        loadData();
                    }">搜索
                    </el-button>
                </el-form-item>
            </el-form>
        </el-header>
        <el-main>
            <el-container class="table-con">
                <el-header class="custom-header-button">
                <span>
                    共有
                    <span class="num">{{ total }}</span>个资源
                </span>
                    <div style="float: right;">
                        <el-button type="primary"  size="mini" @click="handleCreate">新 建</el-button>
                        <el-button @click="exportExcel" size="mini">导
                            出{{multipleSelection.length!==0?'选中'+multipleSelection.length+'记录':''}}
                        </el-button>
                    </div>
                </el-header>
                <el-main >
                    <DynamicTable
                            :columns="tableColumns"
                            :list="tableData" :current-page="currentPage"
                            ref="singleTable"
                            @selection-change="handleSelectionChange"
                    >
                        <template slot="top">
                            <el-table-column type="selection" width="55"></el-table-column>
                        </template>
                        <template slot="end">
                            <el-table-column label="状态" align="center" :fixed="fixed">
                                <template slot-scope="scope">
                                    <span class="status" style='color:#67C23A;' v-if="scope.row.state === 0 ">开机</span>
                                    <span class="status" style='color:red;' v-else>关机</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center" :min-width="200" :fixed="fixed">
                                <template slot-scope="scope">
                                    <el-row>
                                        <el-button @click="handleOn(scope.row)" type="text" size="small" v-if="scope.row.machineType==='服务器'">开机
                                        </el-button>
                                        <el-button @click="handleDown(scope.row)" type="text" size="small" v-if="scope.row.machineType==='服务器'">关机
                                        </el-button>
                                        <el-button @click="handleEdit(scope.row)" type="text" size="small">修改
                                        </el-button>
                                        <el-button @click="handleUserPwd(scope.row)" type="text" size="small"
                                                   v-if="scope.row.pwIsExist">修改账号密码
                                        </el-button>
                                        <el-button @click="handleDelete(scope.row)" type="text" size="small">下架
                                        </el-button>
                                    </el-row>
                                </template>
                            </el-table-column>
                        </template>
                    </DynamicTable>
                </el-main>
                <el-footer style="height: auto;">
                    <CustomPage
                            :currentPage="currentPage"
                            :pageSize="pageSize"
                            :total="total"
                            @current-change="handleCurrentChange"
                            @size-change="handleSizeChange"
                    />
                </el-footer>
            </el-container>
        </el-main>
    </el-container>
</template>
<script>
import CustomPage from '@/common/CustomPage';
import CuDatepicker from '@/common/CuDatepicker';
import DynamicTable from '@/common/DynamicTable';
import API from '../api.js';

export default {
  name: 'databaseresource',
  components: {
    CustomPage,
    CuDatepicker,
    DynamicTable
  },
  data() {
    return {
      tableHeight: null,
      fixed: 'right',
      searchForm: {
        resourceName: '',
        createTimeStart: '',
        createTimeEnd: ''
      },
      pageNo: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      multipleSelection: [],
      tableColumns: [
        {
          field: 'resourcesName',
          title: '资源名称',
          width: '160px',
        },
        {
          field: 'dictValue',
          title: '数据库类型',
          width: '120px',
          renderer(v) {
            let str ='-';
            switch (v) {
            case 1: {
              str='Oracle11g';
              break;
            }
            case 2: {
              str='Oracle12c';
              break;
            }
            }
            return str;
          }
        },
        {
          field: 'databaseIp',
          title: 'IP',
          width: '140px',
        },
        {
          field: 'databasePort',
          title: '端口',
          width: '80px',
        },
        {
          field: 'databaseName',
          title: '数据库名称',
          width: '120px',
        },
        {
          field: 'url',
          title: 'URL',
          width: '120px',
        },
        {
          field: 'rackDept',
          title: '资源所在位置',
          width: '100px',
        },
        {
          field: 'createBy',
          title: '创建者',
          width: '100px',
        },
        {
          field: 'createTime',
          title: '创建时间',
        },
        {
          field: 'fld_param',
          title: '备注',
        },
      ],
      loading: false
    };
  },
  watch: {

  },
  methods: {
    // 请求列表数据
    loadData() {
      this.loading = true;
      API.list({
        ...this.searchForm,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      })
        .then(res => {
          const data = res.data;
          if (data.code === 200) {
            this.total = data.data.total;
            this.tableData = data.data.list;
          } else {
            this.total = 0;
            this.tableData = [];
          }
          this.loading = false;
        })
        .catch(() => {
          this.total = 0;
          this.tableData = [];
          this.loading = false;
        });
    },

    // 选择时间
    updatedate(v) {
      this.searchForm.createTimeStart = v[0];
      this.searchForm.createTimeEnd = v[1];
    },

    // 新建
    handleCreate() {
      this.$emit('changeComponent', {
        active: 'databaseconfig',
        type: 'add',
        id: ''
      });
    },

    // 测试连接
    testConnection(row) {
      row.testconn = true;
      this.$api.resourcemanage.testConn
        .call(this, row)
        .then(result => {
          if (result.data.code === 200) {
            this.$message({
              message: result.data.msg,
              type: 'success'
            });
          } else {
            this.$message({
              message: result.data.msg,
              type: 'error'
            });
          }
          row.testconn = false;
        })
        .catch(() => {
          row.testconn = false;
        });
    },

    // 详情
    detail(row) {
      this.$emit('changeComponent', {
        active: 'databasedetail',
        type: 'detail',
        id: row.resourceId
      });
    },

    // 修改
    modify(row) {
      let valid = true;
      row.dbTaskVoList && row.dbTaskVoList.forEach((d) => {
        if (d.dbTaskStatus != 0) {
          valid = false;
        }
      });
      if (valid) {
        this.$emit('changeComponent', {
          active: 'databaseconfig',
          type: 'modify',
          id: row.resourceId
        })
      } else {
        this.$message({
          message: '已关联任务正在运行，请暂停任务！',
          type: 'error'
        });
      }
    },

    // 删除
    deleteItem(row) {
      if (row.dbTaskVoList.length === 0) {
        this.$confirm('是否确定删除？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$api.resourcemanage.databaseDelete
              .call(this, row.resourceId)
              .then(result => {
                if (result.data.code === 200) {
                  this.$message({
                    message: result.data.msg,
                    type: 'success'
                  });
                  this.loadData();
                } else {
                  this.$message({
                    message: result.data.msg,
                    type: 'error'
                  });
                }
                this.loadData();
              })
              .catch(() => {
              });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
              center: true
            });
          });
      } else {
        this.$message({
          message: '此资源已关联任务，取消已关联的任务方可删除！',
          type: 'error'
        });
      }
    },

    // 翻页
    handleSizeChange(size) {
      this.pageSize = size;
      this.loadData();
    },

    // 翻页
    handleCurrentChange(currentPage) {
      this.pageNo = currentPage;
      this.loadData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
  mounted() {
    this.loadData()
    this.$nextTick(() => {
      let pw = this.$refs['singleTable'].$el.getBoundingClientRect().width;
      let tw = this.$refs['singleTable'].$el.querySelector('.el-table__body').getBoundingClientRect().width;

      if (tw > pw) {
        this.fixed = 'right';
      }
    })
  }
}
</script>
<style scoped>
    .vertical {
        color: #bababa;
        padding: 0 5px;
    }

    .span {
        float: left;
        margin-top: 6px;
    }

    .addbtn {
        float: right;
    }
</style>
